<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jqGrid Demos</title>
    <link href="../../../bootstrap/2.3.1/css_default/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <!-- <link href="../css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> -->
    <link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>

    <link href="../../../common/jeesite.css" type="text/css" rel="stylesheet"/>

    <script src="../../../jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="../js/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="../plugins/grid.complexHeaders.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            //  ==============

            var grid2 = $("#list2").jqGrid({
                url: 'server.json',
                datatype: "json",
                jsonReader: { // 自定义json数据格式
                    root: "list", page: "pageNo", total: "totalPage",
                    records: "count", subgrid: {root: "list"}
                },
                colNames: ['编号', '类型', '<font color=red>关键字</font>', '日期', '访问数', '其它'],
                colModel: [
                    {name: 'Id', index: 'id', width: 55, sortable: false, frozen: true},
                    {name: 'DataType', index: 'data_type', width: 120, frozen: true},
                    {name: 'KeyWords', index: 'key_words desc, data_type', width: 300},
                    {name: 'DoTime', index: 'do_time', width: 360, align: "center"},
                    {name: 'DataCount', index: 'data_count', width: 280, align: "right", formatter: 'number'},
                    {
                        name: 'test', index: 'total', width: 500, formatter: function (val, obj, row, act) {
                        return " test"
                    }
                    }
                ],
                rowNum: -1, // 显示行数，-1为显示全部
                //rowList:[10,20,30],
                //pager: '#pager2',
                //sortname: 'id',
                //sortorder: "asc",
                //viewrecords: true,
                rownumbers: true,	// 显示序号
                shrinkToFit: false, // 不按百分比自适应列宽
                multiselect: true, // 显示多选复选框
                multiboxonly: true, // 单击复选框时在多选
                footerrow: true, // 显示底部合计行
                userDataOnFooter: true, // 使用json数据作为合计行数据
                altRows: true, // 斑马线样式，交替行altclass
                beforeRequest: function (data) {
                    //console.log(data);
                },
                loadComplete: function (data) {
                    //console.log(data.page);
                },
                loadError: function (data) {
                    //console.log(data);
                },
                gridComplete: function () {
                    //var dataCount  = $(this).getCol('DataCount',false,'sum');
                    //$(this).footerData("set",{name:"合计",
                    //	DataCount:dataCount
                    //});
                    //$(".ui-jqgrid-sdiv").show();
                    $(window).resize();
                }
                //caption:"JSON Example"
            });
            // 二级表头
            grid2.jqGrid('setGroupHeaders', {
                useColSpanStyle: true,
                groupHeaders: [
                    {startColumnName: 'Id', numberOfColumns: 2, titleText: 'Client Details'},
                    {startColumnName: 'DoTime', numberOfColumns: 3, titleText: 'Client KeyWords'}
                ]
            });
            // 三级表头
// 	grid2.jqGrid('setComplexHeaders', {
// 	  complexHeaders:{
// 		defaultStyle:true,
// 		twoLevel:[
// 			{startColumnName: 'DoTime', numberOfColumns: 2, titleText: '二级表头'}
// 		],
// 		threeLevel:[
// 			{startColumnName:'Id',numberOfColumns:2,titleText:'三级表头'},
// 			{startColumnName:'KeyWords',numberOfColumns:3,titleText:'三级表头2'}
// 		]
// 	  }
// 	});
            grid2.jqGrid('setFrozenColumns'); // 冻结列，在colModel指定frozen: true
            //grid2.jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
            $(window).resize(function () {
                grid2.jqGrid('setGridWidth', $(window).width() - 100);// 自动调整表格大小
                grid2.jqGrid('setGridHeight', $(window).height() / 2 - 100);// 自动调整表格大小
                $("#gbox_list2 .ui-jqgrid-bdiv").css({"padding-bottom": "20px"});
                $("#gbox_list2 .ui-jqgrid-sdiv").width($(".ui-jqgrid-sdiv").width() - 16);
                $("#gbox_list2 .ui-jqgrid-sdiv").css({"position": "absolute", "bottom": "16px"});
                //$("#gbox_list2 .ui-jqgrid-sdiv td").css({"border-bottom":"solid 1px #ddd"});
                $("#gbox_list2 .ui-jqgrid-sdiv td").not("td.jqgrid-rownum").css({"background": "#fdfdfd"});
                $("#gbox_list2 .frozen-sdiv.ui-jqgrid-sdiv").css({"top": "auto", "z-index": "1"});
                $("#gbox_list2 .frozen-sdiv td:eq(3)").text("合计：");
            }).resize();

            // ===========

            var grid = $("#list1").jqGrid({
                url: 'server.json',
                datatype: "json",
                jsonReader: {
                    root: "list",
                    page: "pageNo",
                    total: "totalPage",
                    records: "count",
                    subgrid: {root: "list"}
                },
                colNames: ['编号', '类型', '<font color=red>关键字</font>', '日期', '访问数', '操作'],
                colModel: [
                    {name: 'Id', index: 'id', width: 55, sortable: false, frozen: true},
                    {name: 'DataType', index: 'data_type', width: 120, frozen: true},
                    {name: 'KeyWords', index: 'key_words desc, data_type', width: 100},
                    {name: 'DoTime', index: 'do_time', width: 160, align: "center"},
                    {name: 'DataCount', index: 'data_count', width: 80, align: "right", formatter: 'number'},
                    {
                        name: 'btns', index: 'total', width: 100, formatter: function (val, obj, row, act) {
                        return " <a href='#" + row.Id + "'>添加</a> <a href='#" + row.Id + "'>删除</a>"
                    }
                    }
                ],
                rowNum: -1,
                //rowList:[10,20,30],
                //pager: '#pager2',
                //sortname: 'id',
                //sortorder: "asc",
                //viewrecords: true,
                rownumbers: true,
                //shrinkToFit: false,
                multiboxonly: true,
                multiselect: true,
                beforeRequest: function (data) {
                    //console.log(data);
                },
                loadComplete: function (data) {
                    //console.log(data.page);
                },
                loadError: function (data) {
                    //console.log(data);
                },
                gridComplete: function () {
                    $(window).resize();
                }
                //caption:"JSON Example"
            });
            grid.jqGrid('navGrid', 'hideCol', "Id").jqGrid('sortableRows');
            //grid.jqGrid('setFrozenColumns');
            //grid.jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
            $(window).resize(function () {
                grid.jqGrid('setGridWidth', $(window).width() - 100);
                grid.jqGrid('setGridHeight', $(window).height() / 2 - 100);
            }).resize();
        });
    </script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
<br/>
<table id="list1"></table>
</body>
</html>